<%@taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.listnav.min-2.1.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.dataTables.listnav.js"></script>
	

<script type="text/javascript" charset="utf-8"
	src="js/jquery.validate.min.js"></script>

<script src="js/jquery.jgrowl_minimized.js"></script>
	

<script type="text/javascript"> 

	function displayResult(val) {
		document.getElementById("nameLookup").value = val;
	}
	
	// Load data Name GOR vao mang arr
	var arr;
	$.ajax({
		url : 'checkNameGOR.action',
		success : function(data) {
			console.log(data.list[2]);
			arr= data.list;
		}
	});
	
	
	
	$(document).ready( function() {
			$("#lblError").hide();
			$("#btnSubmit1").click(
					function() {
						var value = $("#name").val();
						for ( var i = 0; i < arr.length; i++) {
							if (value == arr[i]) {
								$('#lblError').show();
								$('#control-groupName').removeClass(
										'success').addClass('error');
								$('#txtHidden').val("");
								return;
							}
						}
						if (value == "") {
							$('#control-groupName').removeClass('success')
									.addClass('error');
							$('#lblError').show();
							$('#txtHidden').val("");
						} else {

							$('#lblError').hide();
							$('#txtHidden').val("aa");
							$("#control-groupName").addClass('success');
							$("#control-groupName").removeClass('error');
						}
					});

			// Check validate 
			if ($('.validate').length > 0) {
				$('.validate').validate(
						{
							highlight : function(label) {
								$(label).closest('.control-group')
										.addClass('error');
							},
							success : function(label) {
								label.addClass('valid').closest(
										'.control-group').addClass(
										'success');
							}
						});
			}



			// Demo show message 
			$("#closeGOR").click(function() {
				//alert($("#valueGOR").val());

				//var value = $("#valueGOR").val();
				//$("#nameLookup").val(value); 

				if ($('.opengrowl').hasClass("hasheader")) {
					var head = $('.opengrowl').data('header');
					$.jGrowl(content, {
						header : head
					});
				} else {
					$.jGrowl(content);
				}
				setTimeout("go_now()", 1500);
			});
		});

	// Auto redirect
	function go_now() {
		window.location = "http://www.google.com";
	}
</script>


<div id='listGOR'> </div>

<div class="container-fluid" id='addGOR'>
	<div class="content">
		<div class="row-fluid">
			<div class="span12">
				<div class="box">
					<div class="box-head">
						<h3>View/Edit Grovernment Office Region</h3>
					</div>
					<div class="box-content box-nomargin">
						<div class='form-horizontal'>  
						
							<!-- ---------- Step 2--------------------- -->
							<div class="step" id="step2">
								<h4>Step Edit</h4>
								
								<form action='createGOR.action' class='validate form-horizontal'>
									<div class="control-group" id='control-groupName'>
										<label for="uname1" class="control-label"> GOR Name </label>
										<div class="controls">
											<input type="text" name="nameE" id="name"
												class='input-square'> <label class='' id='lblError'
												style='color: #B94A48'>This field cannot null or is
												existed.</label>
										</div>
									</div>
									<div class="control-group">
										<label for="uname1" class="control-label">Description</label>
										<div class="controls">
											<input type="text" name="descriptionE" id="email1"
												class='required'>
										</div>
									</div>

									<div class="control-group">
										<label for="email1" class="control-label">Country</label>
										<div class="controls">
											<input type="text" name="countryE" id="country2"
												class='required'>
										</div>
									</div>

									<div class="control-group">
										<label for="email1" class="control-label"> Is Active </label>
										<div class="controls">
											<label class="checkbox"> <s:checkbox name="activeE">
												</s:checkbox>Is Active
											</label>
										</div>
									</div>


									<div class="control-group">
										<label for="email1" class="control-label"> Demo Lookup
										</label>
										<div class="controls">
											<input type="text" id="nameLookup" /> <a
												class="btn btn-primary" data-toggle="modal" href="#myModal">
												Lookup </a>
										</div>
									</div>

									<div class="control-group" style="visibility: hidden">
										<div class="controls">
											<input type="text" name="txtHidden" id="txtHidden"
												class='required'>
										</div>
									</div>

									<div id="navigationE">
										<div class="form-actions">
											<!-- <a href="listGOR.action" > <input class="navigation_button btn btn-danger" id="back"
											value="Back" type="submit" /> </a>  -->

											<!-- <input class="navigation_button btn btn-primary" id="createGOR"
											value="Create" type="submit" /> -->
											<input type="submit" value="Save" id="btnSubmit1"
												class='btn btn-primary opengrowl'
												data-content="Some sample content ok"> <a
												href="listGOR.action"> <input type="button"
												value="Cancel" id="btnCancel" class='btn btn-primary'></a>
											<input id="closeGOR" value="Message" type="button">
										</div>
									</div>
								</form>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
	</div>
</div>







<!-- Popup -->
<div class="modal hide" id="myModal">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">x</button>
		<h3>Government Office Region Details</h3>
	</div>
	<div class="modal-body">
		<div class="box-content box-nomargin" id="tblList">
			<div class="tab-content">
				<div class="tab-pane active" id="basic">
					<table class='table table-striped dataTable table-bordered display'>
						<thead>
							<tr>
								<th>!</th>
								<th>ID</th>
								<th>Name</th>
								<!-- <th>Description</th> -->
								<th>Country</th>
								<th>Active</th>
							</tr>
						</thead>
						<tbody>
							<%-- <s:iterator value="listGORLookup" status="stat" var="gor">
								<tr class="odd_gradeX">
									<td><input type="radio" onclick="displayResult(this.value)"  name="radio" class="radio" 
										value="<s:property value="#gor"/>" 
										/></td>
									<td><s:property value="#gor.id" /></td>
									<td><s:property value="#gor.GovernmentOfficeRegionName" /></td>
									<td><s:property value="#gor.Description" /></td>
									<td><s:property value="#gor.Country" /></td>
									<td><s:if test="#gor.active">Yes</s:if> <s:else>No</s:else></td>
								</tr>
							</s:iterator> --%>
						</tbody>
					</table>
				</div>


				<!-- <input type="hidden" id="valueGOR" value="aa"> -->

				<div class="modal-footer">
					<a href="#" class="btn btn-primary" data-dismiss="modal"> <input
						class="navigation_button btn btn-primary" id="closeGOR"
						value="Close" type="button" />
					</a>
				</div>

			</div>
		</div>
	</div>
</div>

